<template>
  <div id="cart">
    <nav-bar class="nav-bar"><template #center>购物车{{cartLenght}}</template></nav-bar>
    <cart-list/>
    <cart-bottom-bar/>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import {mapGetters} from 'vuex'
import CartList from './childComps/CartList.vue'
import CartBottomBar from './childComps/CartBottomBar.vue'

export default {
  name: 'Cart',
  components: {
    NavBar,
    CartList,
    CartBottomBar,
  },
  computed: {
    ...mapGetters(['cartLenght'])
  }
}
</script>

<style scoped>
.nav-bar {
  background-color: red;
  color: #fff;
  font-weight: 700;
  /* 为了在使用原生滚动时，导航栏不随着内容滚动 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
</style>